// 获取DOM元素
const userTableBody = document.getElementById('user-table-body');
const addUserBtn = document.getElementById('add-user-btn');
const userModal = document.getElementById('user-modal');
const closeModal = document.getElementById('close-modal');
const userForm = document.getElementById('user-form');
const saveUserBtn = document.getElementById('save-user-btn');
const modalTitle = document.getElementById('modal-title');
const cancelBtn = document.getElementById('cancel-btn');
const searchBtn = document.getElementById('search-btn');
const searchInput = document.getElementById('search-user');
const logoutBtn = document.getElementById('logout-btn');

// 用于保存当前的搜索条件
let searchQuery = '';

// 渲染用户表格
function renderUserTable(users) {
  userTableBody.innerHTML = '';
  const filteredUsers = users.filter(user => {
    return user.username.includes(searchQuery) || user.role.includes(searchQuery);
  });

  filteredUsers.forEach(user => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${user.id}</td>
      <td>${user.username}</td>
      <td>${user.role}</td>
      <td>
        <button class="edit-btn" data-id="${user.id}">编辑</button>
        <button class="delete-btn" data-id="${user.id}">删除</button>
      </td>
    `;
    userTableBody.appendChild(row);
  });

  // 添加编辑和删除按钮事件监听
  document.querySelectorAll('.edit-btn').forEach(button => {
    button.addEventListener('click', (e) => editUser(e.target.dataset.id));
  });

  document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', (e) => deleteUser(e.target.dataset.id));
  });
}

// 获取用户数据
function fetchUsers() {
  $.ajax({
    url: 'http://localhost:8083/api/root/user/list',  // 后端用户数据接口
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      pageNum: 1,  // 传递当前页码
      pageSize: 10,  // 每页显示的数据条数
    }),
    success: function(response) {
      if (response.code === 200) {
        renderUserTable(response.data.records);  // 渲染返回的用户数据
      } else {
        alert("获取用户数据失败");
      }
    },
    error: function(xhr, status, error) {
      console.error('获取用户数据失败:', error);
    }
  });
}

// 打开弹窗
function openModal(isEdit = false, user = null) {
  userModal.style.display = 'block';
  if (isEdit) {
    modalTitle.textContent = '编辑用户';
    document.getElementById('username').value = user.username;
    document.getElementById('role').value = user.role;
    saveUserBtn.dataset.id = user.id;
  } else {
    modalTitle.textContent = '新增用户';
    userForm.reset();
    delete saveUserBtn.dataset.id;
  }
}

// 关闭弹窗
closeModal.addEventListener('click', () => {
  userModal.style.display = 'none';
});

// 取消按钮事件
cancelBtn.addEventListener('click', () => {
  userModal.style.display = 'none';
});

// 保存用户信息
userForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const username = document.getElementById('username').value;
  const role = document.getElementById('role').value;

  if (!username || !role) {
    alert("用户名和角色不能为空！");
    return;
  }

  const user = { username, role };

  if (saveUserBtn.dataset.id) {
    updateUser(saveUserBtn.dataset.id, user);
  } else {
    addUser(user);
  }

  userModal.style.display = 'none';
});

// 添加新用户
function addUser(user) {
  $.ajax({
    url: 'http://localhost:8083/api/root/user/add',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(user),
    success: function(response) {
      if (response.code === 200) {
        fetchUsers(); // 添加成功后刷新用户列表
      } else {
        alert("添加用户失败");
      }
    },
    error: function(xhr, status, error) {
      console.error('添加用户失败:', error);
    }
  });
}

// 更新用户
function updateUser(userId, user) {
  $.ajax({
    url: `http://localhost:8083/api/root/user/update`,
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ ...user, id: userId }),
    success: function(response) {
      if (response.code === 200) {
        fetchUsers(); // 更新成功后刷新用户列表
      } else {
        alert("更新用户失败");
      }
    },
    error: function(xhr, status, error) {
      console.error('更新用户失败:', error);
    }
  });
}

// 删除用户
function deleteUser(id) {
  $.ajax({
    url: `http://localhost:8083/api/root/user/delete/${id}`,
    type: 'POST',
    success: function(response) {
      if (response.code === 200) {
        fetchUsers(); // 删除成功后刷新用户列表
      } else {
        alert("删除用户失败");
      }
    },
    error: function(xhr, status, error) {
      console.error('删除用户失败:', error);
    }
  });
}

// 新增用户按钮事件
addUserBtn.addEventListener('click', () => {
  openModal();
});

// 搜索按钮事件
searchBtn.addEventListener('click', () => {
  searchQuery = searchInput.value.trim(); // 获取搜索框的内容
  fetchUsers(); // 根据搜索条件获取用户数据
});

// 退出按钮点击事件
logoutBtn.addEventListener('click', () => {
  window.location.href = '../login.html'; // 假设你要跳转到登录页面
});

// 页面初始化时获取用户数据
$(document).ready(function() {
  fetchUsers();
});
